<template>
  <el-container class="root-container">
    <home-menu/>
    <el-container>
      <el-header class="header" height="2rem">
        <header-setting :position-code="positionCode" :event-flag="eventFlag"/>
      </el-header>
      <tags-view ref="tagsView" v-if="showTagViews"/>
      <el-main class="main-container">
        <keep-alive :include="cachedViews">
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import HomeMenu from './components/HomeMenu'
import HeaderSetting from './components/HeaderSetting'
import TagsView from '@/components/layout/TagsView'
import {mapState} from 'vuex'

export default {
  name: "Home",
  components: {
    HomeMenu,
    HeaderSetting,
    TagsView
  },
  computed: {
    ...mapState({
      showTagViews: state => state.user.showTagViews,
      visitedViews: state => state.tagsView.visitedViews,
      cachedViews: state => state.tagsView.cachedViews,
    }),
  },
  data() {
    return {
      positionCode: '',
      subWarnKeys: '',
      eventFlag: false,
      currentPosition: ''
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (this.$refs.tagsView && this.$refs.tagsView.inCloseOperation) {
      this.$refs.tagsView.inCloseOperation = false
      if (this.$refs.tagsView.visitedViews.find(a => a.fullPath === to.path)) {
        next()
      } else {
        this.$refs.tagsView.toLastView()
      }
    } else {
      next()
    }
  },
}
</script>

<style lang="scss">
@import "~@/assets/styles/base.scss";

.header {
  /*border-bottom: 1px solid #d8dce5;*/
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  padding: 0 !important;
  background-color: white;
  @include flex-row();

}


.root-container {
  height: 100%;
  overflow-y: hidden;
  background-color: #F8F8F8;

}

.order-index-container {
  height: calc(100% - 40px);

}

.main-container {
  padding: 0 !important;
  margin: 8px 8px 0 8px;
  background-color: #F8FBFF;
  height: 100%;
  position: relative;

}

.notificationWrapperCls {
  line-height: 25px;

}

.notificationTitleCls {
  padding-right: 15px;

}

</style>